<template>
  <div class="container">
    <div class="bg">
      <!-- <img src="https://formal.jcdcbm.com/logo/bg.jpg" /> -->
      <img src="@/assets/images/login/bg.jpg" />
    </div>
    <div class="right">
      <div class="login-ct">
        <div class="title">
          <img class="title-logo" src="@/assets/images/login/logo.png" />
          <h3 class="title-text">住保保管理平台</h3>
        </div>
        <el-form
          ref="form"
          :model="list"
          :rules="rules"
          class="form"
          auto-complete="on"
          label-position="left"
          @keyup.enter.native="handleLogin"
        >
          <el-form-item prop="username">
            <img class="icon" src="@/assets/images/login/icon_user.png" />
            <el-input
              ref="username"
              v-model="list.username"
              placeholder="用户名"
              name="username"
              type="text"
              tabindex="1"
              auto-complete="on"
            />
          </el-form-item>

          <el-form-item class="last-item" prop="password">
            <img class="icon" src="@/assets/images/login/icon_psd.png" />
            <el-input
              :key="passwordType"
              ref="password"
              v-model="list.password"
              :type="passwordType"
              placeholder="密码"
              name="password"
              tabindex="2"
              auto-complete="on"
              @keyup.enter.native="handleLogin"
            />
            <el-input v-show="false" v-model="list.type" name="type" type="hidden" value="1" />
          </el-form-item>

          <!-- <div class="forget-ct" @click="handleRegister">
          <img class="icon-psd" src="@/assets/images/login/icon_wenhao.png" />
          <span>忘记密码</span>
          </div>-->

          <div class="btns">
            <el-button
              v-loading="loading"
              type="primary"
              class="btn login-btn"
              @click.native.prevent="handleLogin"
            >登录</el-button>
            <!-- <el-button
            type="primary"
            class="btn register-btn"
            @click.native.prevent="handleRegister"
            >注册</el-button>-->
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { validUsername } from '@/utils/validate'
var CryptoJS = require('crypto-js') // encryption

export default {
  name: 'Login',
  data() {
    return {
      list: {
        height: document.documentElement.clientHeight + 'px',
        username: null,
        password: null,
        type: '1',
        fromType: 'PC'
      },
      rules: this.rules,
      loading: false,
      passwordType: 'password',
      redirect: undefined
    }
  },
  watch: {
    $route: {
      handler: function(route) {
        this.redirect = route.query && route.query.redirect
      },
      immediate: true
    }
  },
  created() {
    if (process.env.VUE_APP_BASE_API === '/api') {
      this.list.username = 'jcdfuzhou'
      this.list.password = '123456'
    }
  },
  methods: {
    /* 登录 */
    handleLogin(list) {
      if (this.loading) {
        return
      }
      this.$refs.form.validate(valid => {
        if (valid) {
          this.loading = true
          // md5加密密码
          let data = JSON.parse(JSON.stringify(this.list))
          let key = 'f218b81c0528bf69781ff8a7d6729171'
          data.password = CryptoJS.MD5(key + data.password + key).toString(
            CryptoJS.enc.Hex
          )
          this.$store
            .dispatch('user/login', data)
            .then(res => {
              this.$router.push({ path: '/' })
              this.loading = false
            })
            .catch(() => {
              console.log('erro')
              this.loading = false
              /* 测试用——直接跳转 */
              // this.$router.push({ path: '/' })
            })
        } else {
          this.$router.push({ path: '/' })
          return false
        }
      })

      // this.$router.push({ path: '/' })
    },
    /* 注册 */
    handleRegister() {
      this.$router.push({ path: '/' })
    }
  }
}
</script>
<style scoped>
.container {
  display: flex;
  width: 100%;
  max-height: 100vh;
  height: 100vh;
  min-width: 1400px;
  box-sizing: border-box;
  font-family: Microsoft YaHei;
  overflow: hidden;
}
.bg {
  /* position: absolute;
  left: 0;
  top: 0; */
  width: 720px;
  height: 972px;
}
.bg > img {
  width: 100%;
  height: 100%;
}
.right {
  flex: 1;
  display: flex;
  justify-content: center;
}
.login-ct {
  width: 468px;
  margin-top: 11.67%;
  /* position: absolute; */
  /* right: 360px; */
  /* right: 16.87%; */
  /* top: 126px; */
  /* top: 11.67%; */
}
.title {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.title-logo {
  width: 92px;
  height: 95px;
}
.title-text {
  margin: 27px 0 45px 0;
  font-size: 25px;
  color: #23ac38;
  font-weight: 400;
}
.form {
  background: #fff;
  box-shadow: 3px 3px 30px rgba(21, 38, 10, 0.16);
  border-radius: 11px;
  padding: 69px 63px;
}
.form .el-form-item {
  position: relative;
  margin-bottom: 27px;
}
.form .last-item {
  margin-bottom: 45px;
  /* margin-bottom: 0; */
}
.form >>> .el-input input {
  height: 51px;
  line-height: 51px;
  padding-left: 58px;
  background: #f1fff3;
  color: #23ac38;
  font-size: 15px;
}
.form .icon {
  position: absolute;
  left: 11px;
  top: 11px;
  width: 29px;
  height: 29px;
  z-index: 999;
}
.forget-ct {
  width: 100%;
  height: 19px;
  line-height: 19px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin: 9px 0 36px 0;
  cursor: pointer;
}
.forget-ct > span {
  font-size: 14px;
  color: #23ac38;
}
.icon-psd {
  width: 14px;
  height: 14px;
  margin-right: 4px;
}
.btns {
  display: flex;
  justify-content: space-between;
}
.btn {
  display: flex;
  align-content: center;
  justify-content: center;
  width: 153px;
  height: 51px;
  line-height: 51px;
  padding: 0;
  background: #23ac38;
  border-radius: 5px;
  color: #fff;
  font-size: 18px;
  border: none;
}
.login-btn {
  width: 100%;
}
@media screen and (max-width: 1400px) {
  .bg {
    width: 50%;
  }
}
</style>
